<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 在白色背景的动画中一般是给body一个浅灰色的背景来显示 */
			body {
				background-color: #ccc;
			}

			.a {
				position: absolute;
				width: 200px;
				height: 100px;
				background: url(../images/bear.png) no-repeat;
				/* 元素可以同时添加多个动画， 这是这个案例的主要用途 */
				animation: bear 1s steps(8) infinite, move 2s linear forwards;
			}

			@keyframes bear {
				from {
					background-position: 0, 0;
				}

				to {
					background-position: -1600px, 0;
				}
			}

			@keyframes move {
				from {
					top: 0px;
					left: 0px;
				}

				to {
					top: 0px;
					left: 50%;
					margin-left: -100px;
				}
			}
		</style>
	</head>
	<body>
		<!-- 这个案例可以看出 速度曲线steps()的用法了 -->
		<div class="a"></div>
	</body>
</html>
